<!--
 * @Description:  courseOutline  -- 智课课程大纲
 * @Author: your name
 * @Date: 2024-02-21
 * @LastEditTime: 2024-02-21
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="courseOutline heart_w">
    <div class="navs">
      <p
        class="navItem"
        v-for="(item, index) in listTabs"
        :key="index"
        :class="{ act: currentDirid == index }"
        @click="tabNav(item, index)"
      >
        {{ item.name }}
      </p>
    </div>

    <div class="outlineMain">
      <div class="collapse">
        <div class="collapseItem" ref="q1">
          <div
            v-for="(item, index) in courseList"
            :key="item + index"
            :id="'quantitative' + (index + 1)"
          >
            <div class="tit">
              <p>{{ item.name }}</p>
              <div class="avatarBox">
                <div
                  class="avatar"
                  :style="{ backgroundImage: `url(${item.teacher_avatar})` }"
                ></div>
                <span>{{ item.teacher_name }}</span>
              </div>
            </div>

            <div class="innerCollapse">
              <div
                class="item"
                v-for="(child, idx) in taskList"
                :key="child + idx"
              >
                <div class="innerTit">
                  <div class="left" @click="getChild(child, item)">
                    <el-progress
                      type="circle"
                      :percentage="Math.round(child.bfb)"
                      color="$color-green"
                      :width="42"
                    ></el-progress>
                    <div class="nameNum">
                      <p class="name">
                        {{ child.name }}
                      </p>
                      <p class="num">
                        知识点：<span> {{ child.count }} 个</span> &nbsp;
                        学习进度：<span>
                          {{ child.nums }}
                        </span>
                        &nbsp; 应学时长：<span> {{ child.hour }} </span>
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="childList"
                  v-if="child.show_child && item.show_child"
                >
                  <div
                    class="listItem"
                    v-for="(items, indexs) in childList"
                    :key="indexs"
                  >
                    <div class="itemCon">
                      <div class="left">
                        <img :src="items.image" alt="" />
                        <!-- <img
                          v-if="items.type == 2"
                          src="@/assets/images/logo_livelan.png"
                          alt=""
                        />
                        <img
                          v-if="items.type == 3"
                          src="@/assets/images/logo_testlan.png"
                          alt=""
                        /> -->
                        <p>
                          {{ item.name }}
                        </p>
                      </div>
                      <div class="right">
                        <p>
                          <span>{{ items.time }}</span> |
                          <span>
                            {{ items.status_text }}
                          </span>
                        </p>
                        <div
                          class="btn yellow"
                          @click="doSomething(items, child)"
                        >
                          {{ items.button_text }}
                        </div>
                        <!-- <div
                          class="btn"
                          @click="doSomething(innerChild, child)"
                          v-if="innerChild.type == 3"
                        >
                          {{
                            innerChild.status == 1
                              ? '查看习题'
                              : innerChild.status == 2
                              ? '继续做题'
                              : '查看解析'
                          }}
                        </div>
                        <div
                          class="btn"
                          @click="doSomething(innerChild, child)"
                          v-if="innerChild.status == 2"
                        >
                          {{
                            innerChild.status == 0
                              ? '未开播'
                              : innerChild.status == 1
                              ? '观看直播'
                              : '观看视频'
                          }}
                        </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="anchorLink">
        <div style="cursor: pointer; margin-bottom: 20px; color: #0193ff">
          继续上次观看
        </div>
        <a
          href="javascript:void(0);"
          v-for="(e, i) in courseList"
          :key="i"
          @click="linkTo(i)"
          :class="{ active: linkid == i }"
        >
          {{ e.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getComboStage,
  getComboTask,
  getComboChapter,
  getComboSubject
} from '@/api/newzhike/courseOutline'
export default {
  name: 'courseOutline',
  data() {
    return {
      currentDirid: 0,
      linkid: 0, // 右侧导航选中
      courseList: [],
      childList: [],
      taskList: [],
      listTabs: [],
      comboId: 1,
      stageId: 1,
      subjectId: 1
    }
  },
  mounted() {},
  created() {
    // console.log(this.$route.query)
    this.comboId = this.$route.query.Id
    this.getComboList(this.$route.query.Id)
    this.openLast(this.stageId)
    this.getChapterList(this.subjectId)
  },
  methods: {
    async getComboList(Id) {
      const { data: data } = await getComboStage({ combo_id: Id })
      this.listTabs = data.data
    },
    doSomething(innerChild, child) {
      if (innerChild.type == 1 && innerChild !== 4) {
        // 开始学习
        this.$router.push({
          path: 'recorded',
          query: {}
        })
      } else if (innerChild.type == 1 && innerChild == 4) {
        return false
      } else if (innerChild.type == 2 && innerChild.status == 2) {
        // 观看视频
        this.$router.push({
          path: 'playbackChat',
          query: {}
        })
      } else if (innerChild.type == 3) {
        // 查看习题
        this.$router.push({
          path: 'courseOutlineTest',
          query: {}
        })
      }
    },
    getChapterList(subjectId) {
      let _that = this
      getComboChapter({
        subject_id: subjectId,
        combo_id: this.comboId
      }).then(({ data: data }) => {
        data.data.map((ele, index) => {
          this.$set(data.data[index], 'show_child', false)
          return ele
        })
        _that.taskList = data.data
      })
    },
    ComboTaskChildList(chapterId) {
      getComboTask({ chapter_id: chapterId, combo_id: this.comboId }).then(
        ({ data: data }) => {
          this.childList = data.data
        }
      )
    },
    openLast(stageId) {
      let _that = this
      getComboSubject({ stage_id: stageId, combo_id: this.comboId }).then(
        ({ data: data }) => {
          data.data.map((ele, index) => {
            this.$set(data.data[index], 'show_child', false)
            return ele
          })
          _that.courseList = data.data
        }
      )
    },
    tabNav(it, i) {
      this.currentDirid = i
      this.openLast(it.id)
      this.getChapterList(it.id)
    },
    getChild(item_child, item) {
      let _that = this
      if (!item.show_child) {
        _that.courseList.forEach((ele, i) => {
          ele.show_child = false
        })
        item.show_child = !item.show_child
      }

      if (!item_child.show_child) {
        _that.taskList.forEach((ele, i) => {
          ele.show_child = false
        })
        _that.ComboTaskChildList(item_child.id)
      }
      item_child.show_child = !item_child.show_child
    },
    linkTo(i) {
      $('html,body').animate(
        { scrollTop: $(`#quantitative${i + 1}`).offset().top - 80 + 'px' },
        500
      )
      this.linkid = i
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/courseOutline.scss';
.courseOutline {
  width: 1000px;
  min-width: 1000px;
  margin: 80px auto;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
  border-radius: 10px;
  padding: 10px 15px 50px;
}
</style>
